<template>
  <view class="">
    <view
      class="_pos-fixed _bottom _left _w-max _z-index-4 _white-bg transition-06 grid-time-pop _over-hid"
      :style="'height:' + height"
      style="border-radius: 40rpx 40rpx 0px 0px"
    >
      <view
        class="_pad-15 _flex-row-bet-mid"
        style="background: linear-gradient(180deg, #f6fcfc, #ffffff)"
      >
        <view>
          <view class="_font-18 _b _mar-bottom-5">请选择服务时间</view>
          <view class="theme-color _font-13">服务开始前2小时可以免费修改时间</view>
        </view>
        <u-icon name="close" @click="closeTimePop" color="#000" size="36"></u-icon>
      </view>

      <scroll-view scroll-y="true" class="_w-max _h-max _over-hid _pad-x-30">
        <picker-view
          class="_w-max _h-max time-grid"
          indicator-class="time-picker-item"
          @change="pickDate"
          :value="time_index"
        >
          <picker-view-column style="flex: 2">
            <view v-for="(item, index) in date_list" :key="index" class="time-picker-item _w-max">
              {{ item.month }}{{ item.date }}{{ item.day }}</view
            >
          </picker-view-column>
          <picker-view-column v-if="!isServeice">
            <view v-for="(item, index) in Hour_list" :key="index" class="time-picker-item">{{
              item
            }}</view>
          </picker-view-column>
          <picker-view-column v-if="!isServeice">
            <view v-for="(item, index) in min_list" :key="index" class="time-picker-item">{{
              item
            }}</view>
          </picker-view-column>
          <picker-view-column v-if="!isServeice">
            <view class="_w-max _flex-row-center-mid">
              <view
                class="_w-45 _text-center _white"
                :class="
                  Number(Hour_list[time_index[1]]) >= night_time ||
                  Number(Hour_list[time_index[1]]) < night_time_morning
                    ? 'red-tips'
                    : 'grey-tips'
                "
                style="padding: 5rpx 0; border-radius: 200rpx; height: unset"
                >夜间</view
              >
            </view>
          </picker-view-column>
        </picker-view>
      </scroll-view>

      <view class="_w-max">
        <view
          class="_pad-y-5 _w-max _grey-99 _font-12 _text-center"
          style="background-color: #f7f7f7"
          >实际到达时间可能会有30分钟的浮动
        </view>
        <view class="_flex-row-mid _white-bg _pad-y-20 _pad-x-15">
          <view
            @click="getTime"
            class="_pad-y-10 theme-color-bg _white _text-center _font-14 _w-max"
            style="border-radius: 200rpx"
            >确认选择</view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      height: '0px',
      date_list: [], //日期
      Hour_list: [], //时间
      min_list: ['00', '30'],
      time_index: [],
      night_time: 19,
      book_start_time: 8,
      book_end_time: 23,
      night_time_morning: 0,
    }
  },
  props: {
    isshow: {
      type: Boolean,
      default: false,
    },
    isServeice: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    isshow: {
      handler() {
        if (this.isshow) {
          this.height = '60vh'
        } else {
          this.height = '0px'
        }
      },
    },
  },
  methods: {
    //计算时间
    calTimes() {
      console.log('计算时间')
      var list = [],
        h = '',
        time = new Date(Date.parse(new Date())), //  + 7200000 date对象  当前时间加上两个小时
        now_h = time.getHours(), //当前小时
        now_m = time.getMinutes(), //当前分钟
        start_val = [0, 0, 0, 0] //取车起始值

      for (let i = 0; i < 24; i++) {
        h = i + ''
        if (i < 10) {
          h = 0 + h
        }
        if (Number(h) >= this.book_start_time && Number(h) <= this.book_end_time) {
          list.push(h)
        }

        //设置起始时间
        if (now_h == i) {
          if (now_m < 30) {
            start_val[1] = list.length - 1
            start_val[2] = 1
          } else {
            start_val[1] = list.length
            start_val[2] = 0
          }
        }
      }

      this.Hour_list = list
      console.log(this.Hour_list, 'this.Hour_list')
      setTimeout(() => {
        this.time_index = start_val
      }, 20)
    },

    // 获取日期
    getDay(day) {
      console.log(day, 'day')
      var that = this
      var date_list = []
      for (let i = 0; i < day; i++) {
        date_list.push(that.dealTime(i))
      }
      that.date_list = date_list
      console.log(that.date_list, 'that.date_list')
    },
    //计算天数
    dealTime(num) {
      // num：未来天数
      var time = new Date() // 获取当前时间日期
      var date = new Date(time.setDate(time.getDate() + num)).getDate() //这里先获取日期，在按需求设置日期，最后获取需要的
      var year = time.getFullYear() + '年'
      var month = time.getMonth() + 1 // 获取月份
      var day = time.getDay() //  获取星期
      switch (
        day //  格式化
      ) {
        case 0:
          day = '星期日'
          break
        case 1:
          day = '星期一'
          break
        case 2:
          day = '星期二'
          break
        case 3:
          day = '星期三'
          break
        case 4:
          day = '星期四'
          break
        case 5:
          day = '星期五'
          break
        case 6:
          day = '星期六'
          break
      }
      if (month < 10) {
        month = '0' + month + '月'
      } else {
        month = month + '月'
      }
      if (date < 10) {
        date = '0' + date + '日'
      } else {
        date = date + '日'
      }
      var obj = {
        year: year,
        month: month,
        date: date,
        day: day,
      }
      return obj // 返回对象
    },

    //选择时间
    pickDate(e) {
      var val = e.detail.value
      this.time_index = val
    },

    //关闭弹窗
    closeTimePop() {
      this.$emit('closeTimePop', false)
    },
    //输出时间
    getTime() {
      let date = {}
      date.Date = this.date_list[this.time_index[0]]
      date.time = this.Hour_list[this.time_index[1]] + ':' + this.min_list[this.time_index[2]]
      let is_night = 0
      if (
        Number(this.Hour_list[this.time_index[1]]) >= this.night_time ||
        Number(this.Hour_list[this.time_index[1]]) < this.night_time_morning
      ) {
        is_night = 1
      }
      this.$emit('getTime', date, is_night)
      this.closeTimePop()
    },
  },
}
</script>

<style scoped lang="scss">
@import './static/app.scss';

.transition-06 {
  transition: 0.6s;
}

.theme-color {
  color: #0aa394;
}

.theme-color-bg {
  background-color: #0aa394;
}

.grid-time-pop {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.time-picker-modal {
  width: 600rpx;
  background: #fff;
  overflow: hidden;
  border-radius: 20rpx;
}

.time-picker-modal .time-type {
  width: 50%;
  background: #f2f2f2;
  text-align: center;
  color: #666;
}

.time-picker-modal .time-type.active {
  background: #f6fcfc;
  color: #fff;
}

.time-picker-modal .modal-btn-box {
  border-top: 1px solid #ececec;
}

.time-picker-modal .modal-btn {
  line-height: 86rpx;
  flex: 1;
  text-align: center;
  border-right: 1px solid #ececec;
}

.time-picker-modal .modal-btn:last-child {
  border: none;
}

.time-picker-modal .time-picker {
  width: 100%;
  height: 400rpx;
  padding: 0 30rpx;
  box-sizing: border-box;
}

.time-picker-item {
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
}

.red-tips {
  background-color: #ff4c4c;
}

.grey-tips {
  background-color: #d5d5d5;
}
</style>
